<template>
  <div class="hotcity">
    <div class="hot-title">
      <span>热门城市</span>
    </div>
    <div class="hot-list">
      <ul class="hot-ul">
        <li class="hot-li" v-for="item in hotCityList"
            :key="item.id">
          {{item.cityName}}
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
props:["hotCityList"]

}
</script>
<style scoped>
.hot-title {
  height: 0.8rem;
  line-height: 0.8rem;
  padding-left: 0.2rem;
  font-size: 0.32rem;
}
.hot-ul {
  display: flex;
  width: 100%;
  height: 4rem;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-between;
}
.hot-li {
  display: block;
  box-sizing: border-box;
  width: 33.1%;
  height: .98rem;
  line-height: 0.98rem;
  font-size: 0.32rem;
  background: #fff;
  flex-shrink: 0;
  text-align: center;
}
</style>